<template>
	<view class="wrap my-order">
		<!-- 0:待支付 1:待确认 2:已确认 3:已入住 4:已完成 5:已取消，-1.待退款 2.已退款 -->
	<!-- 	<view class='nav acea-row row-around'>
			<view class='item' :class='orderStatus=='' ? "on": ""' @click="statusClick(-1)">
				<view>全部</view>
				<view class='num'>{{orderData.all || 0}}</view>
			</view>
		
			<view class='item' :class='orderStatus==0 ? "on": ""' @click="statusClick(0)">
				<view>待付款</view>
				<view class='num'>{{orderData.noPay || 0}}</view>
			</view>
			<view class='item' :class='orderStatus==14 ? "on": ""' @click="statusClick(14)">
				<view>待确认</view>
				<view class='num'>{{orderData.noConfirm || 0}}</view>
			</view>
			<view class='item' :class='orderStatus==13 ? "on": ""' @click="statusClick(13)">
				<view>待出行</view>
				<view class='num'>{{orderData.noGo || 0}}</view>
			</view>
			<view class='item' :class='orderStatus==3 ? "on": ""' @click="statusClick(3)">
				<view>待评价</view>
				<view class='num'>{{orderData.noComment || 0}}</view>
			</view>
		</view> -->
		<scroll-view scroll-y="true" style="height:100%;width: 100%;" :style="viewColor">
			<view  v-if="orderList.length" style="min-height:320px">
				<!-- <view class="list-title"><text>推荐线路</text> </view> -->
				<view class="list-main"  v-for="(item,index) in orderList" :key="index" @click.stop="goOrderDetail(item.id)">
				    <view class="display-flex-column">
						<view class="row-center tytop">
							<view class="type-desc">
								酒店
							</view>
							<view class="add_time">
								下单时间：{{item.create_time}}
							</view>
							<view class="status_desc">
								{{statusText(item.order_status)}}
							</view>
						</view>
						<view class="row" style="margin-bottom: 15px;">
							<view class="display-flex-column">
								<view class="row-center ml-10">
									
									<view class=" text-black ft-w700 text-16">
										{{item.hotel_name}}
									</view>
								</view>
	
								
								<view class="row-center ml-10 mt-10">
									<view class="text-12">
										{{item.check_in_date}} 至 {{item.check_out_date}}
									</view>
									<view class="text-12 ml-5">
										{{item.room_count}}间
									</view>
								</view>
								<view class="row-center ml-10 mt-10">
									<view class="text-12 line2">
										{{item.nights}}晚·{{item.room_type_name}}·{{item.package_name}}
									</view>
								</view>
							</view>
						</view>
						<view class="line"></view>
						<view class="row-center" style="margin: 14px 5px;">
							<view  class="dan">
							￥{{item.pay_amount}}
							</view>
							
							<view class="detail-desc">
								查看详情
							</view>
						</view>
						
					</view>
				</view>
				<view style="height: 20px;">
				</view>
			</view>
			<view  v-else class="pt-100" >
				<emptyPage title="暂无包车需求"></emptyPage>
			</view>
		</scroll-view>
	
		  
	</view>	
</template>

<script>
	import {
			mapGetters
		} from "vuex";
	import { configMap } from "@/utils";
		
	import {
		toLogin
	} from '@/libs/login.js';
	
	import {  getHotelOrders } from "@/api/hotel.js"
   
	export default {
		computed: configMap({no_image: "https://qiniu.gzyxly.cn/def/3ce36202509191258161967.jpg"},
		mapGetters(['uid','isLogin','viewColor','keyColor'])),
		components:{
			
		},
		data() {
			return {
				isAuto: true, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				orderList: [],
				orderStatus: ''
				
			};
		},
		onShow() {
			if(this.isLogin){
				this.getList()
			} else {
			}
			
	
		},
		onLoad(option) {	
			if(!this.isLogin){
				toLogin()
			}
			
		},
		onReady() {
		},
		methods:{
			
			 statusText(order_status) {
			      const textMap = {
			        0: '待支付',
			        1: '待确认',
			        2: '待入住',
			        3: '已入住',
			        4: '已完成',
			       '5': '已取消',
					'-1': '待退款',
					'-2': '已退款',
			      }
			      return textMap[order_status] || '未知状态'
			    },
			getList(){
				uni.showLoading({
					title:'请稍后...'
				})
				getHotelOrders().then(res => {
					uni.hideLoading()
					this.orderList = res.data
					console.log(123,this.orderList)
				}).catch(err => {
					uni.hideLoading()
					return this.$util.Tips({
						title: err
					}); 
				})
			},
			goOrderDetail(id){
				uni.navigateTo({
					url:"/pages/hotel/hotel_order_detail?order_id="+id,
					complete(err) {
						console.log(err)
					}
				})
			}
			
		},
		
		
	}
</script>

<style lang="scss" scoped>
	.list-main{
		position: relative;
		margin: 12rpx 24rpx;
		background-color: #fff;
		border-radius: 4px;
	}
	
	.line-sn {
		font-size: 15px;
		font-weight: 600;
		color: #000000;
		margin: 8px 10px;
	}
	.od-item{
		font-size: 12px;
	}
	
	.ticket-item {
		margin-left: auto;
		margin-right: 20px;
	}
	.search-empty{
		position: fixed;
		top: 200px;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.type-desc{
		background-color: var(--view-theme);
		color: #fff;
		padding: 1px 3px;
		border-radius: 3px;
	}
	.add_time{
		margin-left: 4px;
		font-size: 13px;
		color: #a7a7a7;
	}
	.tytop{
		margin: 8px 5px;
	}
	.status_desc{
		margin-left: auto;
		color: #ff4231;
		font-weight: 700;
	}
	.dan{
		margin-left: 15px;
		font-size: 16px;
		font-weight: 700;
		color: #ff9419;
	}
	.detail-desc{
		color: var(--view-theme);
		padding: 3px 4px;
		border-radius: 4px;
		border: 1px solid var(--view-theme);
		margin-left: auto;
	}
	
	.station_dot {
	    width: 17rpx;
	    height: 17rpx;
	    border-radius: 50%;
	    margin: 0 30rpx;
	}
	
	.station_dot_start {
	    background-color: rgb(142, 238, 25);
	}
	
	.station_dot_end {
	    background-color: rgb(243, 22, 22);
	}
	.line {
	    height: 2rpx;
	    background: #f0f0f0;
	}
	
	.my-order .nav {
		background-color: #fff;
		width: 690rpx;
		height: 140rpx;
		border-radius: 24rpx;
		margin: 20rpx auto 0 auto;
	}
	.my-order .nav .item {
		text-align: center;
		font-size: 26rpx;
		color: #282828;
		padding: 29rpx 0;
		height: 140rpx;
	}
	.my-order .nav .item.on {
		font-weight: bold;
		border-bottom: 5rpx solid var(--view-theme);
	}
	.my-order .nav .item .num {
		margin-top: 18rpx;
	}
</style>